import type { ProDescriptionsItemProps } from '@/components/ProDescriptions';
import ProDescriptions from '@/components/ProDescriptions';
import AuthRoleConfiguration from '@/pages/user/Admin/components/AuthRoleConfiguration';
import { updateAdminInfo, updateAdminRoles } from '@/pages/user/Admin/service';
import { Tag } from 'antd';
import React from 'react';
import type { DetailItem } from '../data';

const LockerDetail: React.FC<{
  id?: string;
  request: (id: string) => Promise<{ success: boolean; data?: DetailItem }>;
}> = ({ id = '', request }) => {
  // @ts-ignore
  const columns: ProDescriptionsItemProps<DetailItem>[] = [
    {
      label: '管理员名称',
      dataIndex: 'name',
      editable: true,
      onSubmit: async (value) => {
        const res = await updateAdminInfo({ name: value, id });
        return res.code === 0;
      },
    },
    {
      label: '管理员账号',
      dataIndex: 'userName',
    },
    {
      label: '拥有角色',
      dataIndex: 'roles',
      span: 20,
      render: (_, record) => record?.roles?.map((item) => <Tag key={item.id}>{item.name}</Tag>),
      editable: true,
      renderEdit: (_, { value, onChange }) => (
        <AuthRoleConfiguration
          defaultValue={value}
          id={id}
          onChange={(values) => onChange && onChange(values)}
        />
      ),
      onSubmit: async (value) => {
        const res = await updateAdminRoles({ id, roles: value });
        return res.code === 0;
      },
    },
  ];

  return (
    <div>
      <ProDescriptions
        title="管理员账号详情"
        column={1}
        columns={columns}
        params={{ id }}
        request={() => request(id)}
      />
    </div>
  );
};

export default LockerDetail;
